<link  type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet"/>
<script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
      dir: 'https://www.layuicdn.com/layui/' 
      ,version: false 
      ,debug: false 
      ,base: '' 
    });
</script>
<style type="text/css">
	.container-box{
		height: 100vh;
	}
	.layui-headerbox{
		position: relative;
		height: 10%;
		background-color: #666;
	}
	.leftbox,.rightbox{
		float: left;
		width: 50%;
		height: 90%;
	}
	.leftbox{
		background-color: #888;
	}
	.rightbox{
		background-color: #999;
	}
</style>



<div class="container-box">
	<div class="layui-headerbox">
		<!--嵌入layui框架的导航栏组件-->
		<!-- 框架的组件文档 "https://www.layui.com/doc/element/nav.html" -->
		<ul class="layui-nav" lay-filter="" style="min-height: 100%">
			<li class="layui-nav-item"><a href="javascript:;">最新活动</a></li>
			<li class="layui-nav-item layui-this"><a href="javascript:;">产品</a></li>
			<li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
			<li class="layui-nav-item">
				<a href="javascript:;">解决方案</a>
				<dl class="layui-nav-child"> <!-- 二级菜单 -->
					<dd><a href="">移动模块</a></dd>
					<dd><a href="">后台模版</a></dd>
					<dd><a href="">电商平台</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item"><a href="javascript:;">社区</a></li>
		</ul>
		<!--layui框架的导航栏组件结束-->
	</div>


	<!-- 左侧内容区域 -->
	<div class="leftbox">
		

	</div>


	<!-- 右侧内容区域 -->
	<div class="rightbox">
		
		
	</div>
</div>

<script>
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	layui.use('element', function(){
		var element = layui.element;

	  //…
	});

	//获取navitem项
	var navitem=$('.layui-nav .layui-nav-item');
	//为item执行点击事件
	navitem.click(function(){
		console.log($(this).index());
		//利用addClass()、removeClass()来控制当前点击项的样式。
		//siblings()可获取当前点击项的其他兄弟元素
		//$(this).addClass('layui-this')
		//$(this).siblings().removeClass('layui-this');
	});
</script>
